<template>
	<div class="mine">
		<div class="content">
			<div class="left">
				<div class="app_icon">
					<img src="../../assets/images/mine/abao3.png" alt="" />
					<h3>宝店管理</h3>
				</div>
				<div class="app_lists">
					<div class="app_list" @click="selectApp(index)" :class="{gray1:index===selIndex,gray2:index!==selIndex}" v-for="(item,index) in appList" :key="index">
						<img :src="item.img" alt="">
						<h6>{{ item.name }}</h6>
						<div :class="{blue:index===selIndex}"></div>
					</div>
				</div>
			</div>
			<div class="top">
				<div class="personal_info">
					<div class="headimg">
						<img :src="headImg" alt="" />
						<p>{{ username }}</p>
					</div>
					<div class="setting">
						<img src="../../assets/images/mine/set.png" alt="" />
						<img @click="goHomepage" src="../../assets/images/mine/loginout.png" alt="" />
					</div>
				</div>
				<div class="sel_app_info">
					<h3>{{ appList[selIndex].name }}-&nbsp;<span>信息列表</span></h3>
					<button>
						<span>+</span>
						<p>创建宝店</p>
					</button>
				</div>
			</div>
			<!-- 媒体运营 -->
			<div class="content3" v-if="selIndex===0">
				<div class="all_datas" v-loading="loading0">
					 <div class="all_data" v-for="(item,index) in dataList0" @mouseover="appOver0(index)" @mouseout="appOut0" :key="index">
						<div class="all_data_l">
							<img :src="item.face_path" alt="" />
						</div>
						<div class="all_data_m">
							<h2>状态</h2>
							<p>名称：{{ item.title }}</p>
							<p>APPID: {{ item.id }}</p>
							<p>审核: {{ item.status_msg }}</p>
						</div>
						<p></p>
						<div class="all_data_r" v-if="appIndex===index" @click="goManagePlatform0(item)">管理操作</div>
					</div>
					<div class="no_data0" style="margin: 100px auto;" v-if="noData0">暂无数据</div>
				</div>
			</div>
			<!-- 线上电商 -->
			<div class="content3" v-if="selIndex===1">
				<div class="all_datas" v-loading="loading1">
					<div class="all_data" v-for="(item,index) in dataList1" @mouseover="appOver1(index)" @mouseout="appOut1" :key="index">
						<div class="all_data_l">
							<img :src="item.face_path" alt="" />
						</div>
						<div class="all_data_m">
							<h2>状态</h2>
							<p>名称：{{ item.title }}</p>
							<p>APPID: {{ item.id }}</p>
							<p>审核: {{ item.status_msg }}</p>
						</div>
						<p></p>
						<div class="all_data_r" v-if="appIndex===index" @click="goManagePlatform1(item)">管理操作</div>
					</div>
					<div class="no_data1" style="margin: 100px auto;" v-if="noData1">暂无数据</div>
				</div>
			</div>
			<!-- 个体服务 -->
			<div class="content3" v-if="selIndex===2">
				<div class="all_datas" v-loading="loading2">
					<div class="all_data" v-for="(item,index) in dataList2" @mouseover="appOver2(index)" @mouseout="appOut2" :key="index">
						<div class="all_data_l">
							<img :src="item.face_path" alt="" />
						</div>
						<div class="all_data_m">
							<h2>状态</h2>
							<p>名称：{{ item.title }}</p>
							<p>APPID: {{ item.id }}</p>
							<p>审核: {{ item.status_msg }}</p>
						</div>
						<p></p>
						<div class="all_data_r" v-if="appIndex===index" @click="goManagePlatform2(item)">管理操作</div>
					</div>
					<div class="no_data2" style="margin: 100px auto;" v-if="noData2">暂无数据</div>
				</div>
			</div>
			<!-- 实体商户 -->
			<div class="content3" v-if="selIndex===3">
				<div class="all_datas" v-loading="loading3">
					<div class="all_data" v-for="(item,index) in dataList3" @mouseover="appOver3(index)" @mouseout="appOut3" :key="index">
						<div class="all_data_l">
							<img :src="item.face_path" alt="" />
						</div>
						<div class="all_data_m">
							<h2>状态</h2>
							<p>名称：{{ item.title }}</p>
							<p>APPID: {{ item.id }}</p>
							<p>审核: {{ item.status_msg }}</p>
						</div>
						<p></p>
						<div class="all_data_r" v-if="appIndex===index" @click="goManagePlatform3(item)">管理操作</div>
					</div>
					<div class="no_data3" style="margin: 100px auto;" v-if="noData3">暂无数据</div>
				</div>
			</div>
			<!-- 企业号 -->
			<div class="content3" v-if="selIndex===4">
				<div class="all_datas" v-loading="loading4">
					<div class="all_data" v-for="(item,index) in dataList4" @mouseover="appOver4(index)" @mouseout="appOut4" :key="index">
						<div class="all_data_l">
							<img :src="item.face_path" alt="" />
						</div>
						<div class="all_data_m">
							<h2>状态</h2>
							<p>名称：{{ item.title }}</p>
							<p>APPID: {{ item.id }}</p>
							<p>审核: {{ item.status_msg }}</p>
						</div>
						<p></p>
						<div class="all_data_r" v-if="appIndex===index" @click="goManagePlatform4(item)">管理操作</div>
					</div>
					<div class="no_data4" style="margin: 100px auto;" v-if="noData4">暂无数据</div>
				</div>
			</div>
			<!-- 政府机关 -->
			<div class="content3" v-if="selIndex===5">
				<div class="all_datas" v-loading="loading5">
					<div class="all_data" v-for="(item,index) in dataList5" @mouseover="appOver5(index)" @mouseout="appOut5" :key="index">
						<div class="all_data_l">
							<img :src="item.face_path" alt="" />
						</div>
						<div class="all_data_m">
							<h2>状态</h2>
							<p>名称：{{ item.title }}</p>
							<p>APPID: {{ item.id }}</p>
							<p>审核: {{ item.status_msg }}</p>
						</div>
						<p></p>
						<div class="all_data_r" v-if="appIndex===index" @click="goManagePlatform5(item)">管理操作</div>
					</div>
					<div class="no_data5" style="margin: 100px auto;" v-if="noData5">暂无数据</div>
				</div>
			</div>
			<!-- 其它 -->
			<div class="content3" v-if="selIndex===6">
				<div class="all_datas" v-loading="loading6">
					<div class="all_data" v-for="(item,index) in dataList6" @mouseover="appOver6(index)" @mouseout="appOut6" :key="index">
						<div class="all_data_l">
							<img :src="item.face_path" alt="" />
						</div>
						<div class="all_data_m">
							<h2>状态</h2>
							<p>名称：{{ item.title }}</p>
							<p>APPID: {{ item.id }}</p>
							<p>审核: {{ item.status_msg }}</p>
						</div>
						<p></p>
						<div class="all_data_r" v-if="appIndex===index" @click="goManagePlatform6(item)">管理操作</div>
					</div>
					<div class="no_data6" style="margin: 100px auto;" v-if="noData6">暂无数据</div>
				</div>
			</div>
			<footer>
				<p>Copyright&copy;2009-2018www.mofing.com All Rights Reserved.粤ICP备09180978号-8</p>
				<p>1.0.0</p>
			</footer>
		</div>
	</div>
</template>

<script>
	import { setCookie, getCookie, removeCookie, clearCookie } from '@/assets/js/cookie.js'
	export default {
		name: 'mine',
		data() {
			return {
				headImg: '',
				username: '',
				reds: 'red',
				selIndex: 0,
				rems: 1,
				//引用图片相对路径需要加require，否则不显示
				appList: [{
					id: 1,
					name: '媒体运营',
					img: require('../../assets/images/manage/indexM/media.png')
				}, {
					id: 2,
					name: '线上电商',
					img: require('../../assets/images/manage/indexM/online.png')
				}, {
					id: 3,
					name: '个人服务',
					img: require('../../assets/images/manage/indexM/personal.png')
				}, {
					id: 4,
					name: '实体商户',
					img: require('../../assets/images/manage/indexM/shi.png')
				}, {
					id: 5,
					name: '企业号',
					img: require('../../assets/images/manage/indexM/enterprise.png')
				}, {
					id: 6,
					name: '政府机关',
					img: require('../../assets/images/manage/indexM/government.png')
				}, {
					id: 7,
					name: '其它',
					img: require('../../assets/images/manage/indexM/others.png')
				}, ],
				appIndex: -1,
				params: '',
				loading0: true,
				loading1: true,
				loading2: true,
				loading3: true,
				loading4: true,
				loading5: true,
				loading6: true,
				dataList0: [],
				dataList1: [],
				dataList2: [],
				dataList3: [],
				dataList4: [],
				dataList5: [],
				dataList6: [],
				noData0: false,
				noData1: false,
				noData2: false,
				noData3: false,
				noData4: false,
				noData5: false,
				noData6: false
			}
		},
		components: {

		},
		computed: {

		},
		mounted() {
			this.getService0();
		},
		created() {
			setCookie('selIndex', 0);
			this.getHeadPic();
			if(!getCookie('UID') || !getCookie('TOKEN')) {
				this.$router.push('/homepage');
			}
			this.params = '?uid=' + getCookie('UID') + '&token=' + getCookie('TOKEN');

			if(localStorage.getItem('abAppUserName')) {
				this.username = localStorage.getItem('abAppUserName');
			}
			this.resizes();
		},
		methods: {
			//获取头像
			getHeadPic() {
				let obj = {
					uid: getCookie('UID'),
					token: getCookie('TOKEN')
				};
				this.$axiosGet('/platform/service/headpic.json', obj, true).then(res => {
					if(res.data.code === 200) {
						this.headImg = res.data.data;
					}
				})
			},
			//媒体运营服务号显示
			getService0() {
				this.noData0 = false;
				let obj = {
					uid: getCookie('UID'),
					token: getCookie('TOKEN'),
					cat_id: 14673
				};
				this.$axiosGet('/platform/service/service.json', obj, true).then(res => {
					this.loading0 = true;
					if(res.code === 200) {
						this.dataList0 = res.data;
						this.loading0 = false;
						this.getService1();
						this.getService2();
						this.getService3();
						this.getService4();
						this.getService5();
						this.getService6();
					} else if(res.code === 404) {
						this.dataList0 = [];
						this.noData0 = true;
						this.loading0 = false;
						this.getService1();
						this.getService2();
						this.getService3();
						this.getService4();
						this.getService5();
						this.getService6();
					}
				})
			},
			//线上电商服务号显示
			getService1() {
				this.noData1 = false;
				let obj = {
					uid: getCookie('UID'),
					token: getCookie('TOKEN'),
					cat_id: 14706
				};
				this.$axiosGet('/platform/service/service.json', obj, true).then(res => {
					this.loading1 = true;
					if(res.code === 200) {
						this.dataList1 = res.data;
						this.loading1 = false;
					} else if(res.code === 404) {
						this.dataList1 = [];
						this.noData1 = true;
						this.loading1 = false;
					}
				})
			},
			//个人服务服务号显示
			getService2() {
				this.noData2 = false;
				let obj = {
					uid: getCookie('UID'),
					token: getCookie('TOKEN'),
					cat_id: 14707
				};
				this.$axiosGet('/platform/service/service.json', obj, true).then(res => {
					this.loading2 = true;
					if(res.code === 200) {
						this.dataList2 = res.data;
						this.loading2 = false;
					} else if(res.code === 404) {
						this.dataList2 = [];
						this.noData2 = true;
						this.loading2 = false;
					}
				})
			},
			//实体商铺服务号显示
			getService3() {
				this.noData3 = false;
				let obj = {
					uid: getCookie('UID'),
					token: getCookie('TOKEN'),
					cat_id: 14705
				};
				this.$axiosGet('/platform/service/service.json', obj, true).then(res => {
					this.loading3 = true;
					if(res.code === 200) {
						this.dataList3 = res.data;
						this.loading3 = false;
					} else if(res.code === 404) {
						this.dataList3 = [];
						this.noData3 = true;
						this.loading3 = false;
					}
				})
			},
			//企业号服务号显示
			getService4() {
				this.noData4 = false;
				let obj = {
					uid: getCookie('UID'),
					token: getCookie('TOKEN'),
					cat_id: 14708
				};
				this.$axiosGet('/platform/service/service.json', obj, true).then(res => {
					this.loading4 = true;
					if(res.code === 200) {
						this.dataList4 = res.data;
						this.loading4 = false;
					} else if(res.code === 404) {
						this.dataList4 = [];
						this.noData4 = true;
						this.loading4 = false;
					}
				})
			},
			//政府机关服务号显示
			getService5() {
				this.noData5 = false;
				let obj = {
					uid: getCookie('UID'),
					token: getCookie('TOKEN'),
					cat_id: 14715
				};
				this.$axiosGet('/platform/service/service.json', obj, true).then(res => {
					this.loading5 = true;
					if(res.code === 200) {
						this.dataList5 = res.data;
						this.loading5 = false;
					} else if(res.code === 404) {
						this.dataList5 = [];
						this.noData5 = true;
						this.loading5 = false;
					}
				})
			},
			//其它服务号显示
			getService6() {
				this.noData6 = false;
				let obj = {
					uid: getCookie('UID'),
					token: getCookie('TOKEN'),
					cat_id: 14707
				};
				this.$axiosGet('/platform/service/service.json', obj, true).then(res => {
					this.loading6 = true;
					if(res.code === 200) {
						this.dataList6 = res.data;
						this.loading6 = false;
					} else if(res.code === 404) {
						this.dataList6 = [];
						this.noData6 = true;
						this.loading6 = false;
					}
				})
			},
			resizes() {
				let that = this;
				window.onresize = function() {
					var whdef = 100 / 1440;
					var wH = window.innerHeight; // 当前窗口的高度
					var wW = window.innerWidth; // 当前窗口的宽度
					var rem = wW * whdef; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值				 
					that.rems = rem / 100;
				}
			},
			//选中应用号
			selectApp(id) {
				this.selIndex = id;
				setCookie('selIndex', id);
				if(id === 0) {
					if(this.dataList0.length > 0) {
						return;
					}
					this.getService0();
				} else if(id === 1) {
					if(this.dataList1.length > 0) {
						return;
					}
					this.getService1();
				} else if(id === 2) {
					if(this.dataList2.length > 0) {
						return;
					}
					this.getService2();
				} else if(id === 3) {
					if(this.dataList3.length > 0) {
						return;
					}
					this.getService3();
				} else if(id === 4) {
					if(this.dataList4.length > 0) {
						return;
					}
					this.getService4();
				} else if(id === 5) {
					if(this.dataList5.length > 0) {
						return;
					}
					this.getService5();
				} else if(id === 6) {
					if(this.dataList6.length > 0) {
						return;
					}
					this.getService6();
				}
			},
			//管理平台
			goManagePlatform0(obj) {
				localStorage.setItem('appli', JSON.stringify(obj));
				this.$router.push('/managePlatform');
			},
			appOver0(id) {
				this.appIndex = id;
			},
			appOut0() {
				this.appIndex = -1;
			},
			goManagePlatform1(obj) {
				localStorage.setItem('appli', JSON.stringify(obj));
				this.$router.push('/managePlatform');
			},
			appOver1(id) {
				this.appIndex = id;
			},
			appOut1() {
				this.appIndex = -1;
			},
			goManagePlatform2(obj) {
				localStorage.setItem('appli', JSON.stringify(obj));
				this.$router.push('/managePlatform');
			},
			appOver2(id) {
				this.appIndex = id;
			},
			appOut2() {
				this.appIndex = -1;
			},
			goManagePlatform3(obj) {
				localStorage.setItem('appli', JSON.stringify(obj));
				this.$router.push('/managePlatform');
			},
			appOver3(id) {
				this.appIndex = id;
			},
			appOut3() {
				this.appIndex = -1;
			},
			goManagePlatform4(obj) {
				localStorage.setItem('appli', JSON.stringify(obj));
				this.$router.push('/managePlatform');
			},
			appOver4(id) {
				this.appIndex = id;
			},
			appOut4() {
				this.appIndex = -1;
			},
			goManagePlatform5(obj) {
				localStorage.setItem('appli', JSON.stringify(obj));
				this.$router.push('/managePlatform');
			},
			appOver5(id) {
				this.appIndex = id;
			},
			appOut5() {
				this.appIndex = -1;
			},
			goManagePlatform6(obj) {
				localStorage.setItem('appli', JSON.stringify(obj));
				this.$router.push('/managePlatform');
			},
			appOver6(id) {
				this.appIndex = id;
			},
			appOut6() {
				this.appIndex = -1;
			},
			//退出
			goHomepage() {
				let self = this;
				this.$confirm('是否确定退出？', '提示', {
					type: 'warning'
				}).then(() => {
					clearCookie();
					localStorage.clear();
					sessionStorage.clear();
					self.$router.push('/homepage');
				}).catch(() => {

				})
			},
		},
		filters: {
			firstUpperCase(str) {
				return str.replace(/\b(\w)(\w*)/g, function($0, $1, $2) {
					return $1.toUpperCase() + $2.toLowerCase();
				});
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	.mine {
		height: 100%;
		.content {
			height: 100%;
			.left {
				position: fixed;
				left: 0;
				top: 0;
				width: 15.49%;
				height: 100%;
				overflow: auto;
				background: #fff;
				z-index: 9;
				box-shadow: 1px 0 5px #d8e3f0;
				-webkit-box-shadow: 1px 0 5px #d8e3f0;
				.app_icon {
					margin: 16px 0 44px 0;
					img {
						width: 70px;
						height: 67px;
						margin-top: 7px;
					}
					h3 {
						font-size: 17px;
						color: #000;
					}
				}
				.app_lists {
					.app_list {
						display: flex;
						align-items: center;
						padding: 6px 0 12px 0;
						cursor: pointer;
						position: relative;
						img {
							width: 40px;
							height: 40px;
							border-radius: 50%;
							margin: 0 14px 0 12.56%;
						}
						h6 {
							font-size: 14px;
							color: #646995;
						}
						.blue {
							position: absolute;
							top: 0;
							left: 0;
							width: 5px;
							height: 100%;
							background: #3ca0ec;
						}
					}
					.gray1 {
						background: #f3f4f9;
					}
					.gray2 {
						&:hover {
							background: #f3f4f9;
							opacity: .9;
						}
					}
				}
			}
			.top {
				position: fixed;
				right: 0;
				top: 0;
				width: 84.51%;
				height: 167px;
				z-index: 9;
				.personal_info {
					height: 87px;
					display: flex;
					justify-content: flex-end;
					background: #3ca0ec;
				}
				.sel_app_info {
					height: 80px;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0 73px 0 30px;
					background: #fff;
					box-shadow: -5px 0 5px -5px #dae4f0;
					h3 {
						font-size: 19px;
						color: #000;
						span {
							font-size: 15px;
							color: #5cacee;
						}
					}
					button {
						width: 146px;
						height: 40px;
						line-height: 40px;
						border: 1px solid #5cacee;
						border-radius: 5px;
						background: #fff;
						display: flex;
						align-items: center;
						justify-content: center;
						span {
							font-size: 13px;
							color: #5cacee;
						}
						p {
							font-size: 18px;
							color: #5cacee;
							margin-left: 14px;
						}
					}
				}
				.headimg {
					display: flex;
					align-items: center;
					img {
						width: 44px;
						height: 44px;
						border-radius: 50%;
						margin-right: 10px;
					}
					p {
						font-size: 14px;
						color: #fff;
					}
				}
				.setting {
					display: flex;
					align-items: center;
					margin: 0 43px 0 33px;
					img {
						width: 22px;
						height: 24px;
						cursor: pointer;
					}
					img:nth-of-type(1) {
						margin-right: 18px;
					}
				}
			}
			.content3 {
				height: 100%;
				padding: 167px 0 0 15.49%;
				background: #e6edf5;
				.all_datas {
					display: flex;
					flex-wrap: wrap;
					overflow-y: auto;
					padding: 9px 62px 88px 62px;
					background: #e6edf5;
					min-height: 85%;
					.all_data {
						width: 27.88%;
						height: 130px;
						border-radius: 5px;
						background: #fff;
						display: flex;
						align-items: center;
						justify-content: space-around;
						margin: 18px 0 0 16px;
						position: relative;
						.all_data_l {
							img {
								width: 100%;
								height: 100%;
								max-width: 95px;
								max-height: 95px;
								border-radius: 8px;
							}
						}
						.all_data_m {
							text-align: left;
							h2 {
								font-size: 16px;
								color: #7d8991;
								margin-bottom: 6px;
							}
							p {
								font-size: 10px;
								color: #828c94;
							}
							p:nth-of-type(1) {
								width: 125px;
							}
							p:nth-of-type(2) {
								margin: 2px 0;
							}
						}
						>p {
							width: 10px;
							height: 10px;
							border-top: 1px solid #89949b;
							border-right: 1px solid #89949b;
							transform: rotate(45deg);
						}
						.all_data_r {
							position: absolute;
							top: 0;
							left: 0;
							width: 100%;
							height: 130px;
							line-height: 130px;
							background: #55acee;
							font-size: 30px;
							color: #fff;
							cursor: pointer;
						}
					}
				}
			}
		}
		footer {
			position: fixed;
			bottom: 0;
			right: 0;
			width: 84.51%;
			height: 38px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 31px;
			background: #f0f3f6;
			p {
				font-size: 10px;
				color: #a4adb2;
			}
		}
	}
</style>